<template>
	<view class="loginBox">
		<view class="loginBox__content">
			<view class="item-box">
				<view class="item">
					<!-- <text>类型</text> -->
					<view class="item__content">
						<radio-group @change="radioChange">
							<view class="radio-box-wrap">
								<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
									<radio color="#E41805" style="transform: scale(0.7);" :value="item.value" :checked="item.value === current" />
									{{ item.name }}
								</label>
							</view>
						</radio-group>
					</view>
				</view>
				<view class="item">
					<!-- <text>账号</text> -->
					<view class="item__content">
						<input class="item__content__input" type="text" value="" v-model="username" placeholder="请输入账号" placeholder-style="color: #999" />
					</view>
				</view>
				<view class="item">
					<!-- <text>密码</text> -->
					<view class="item__content item__content--password">
						<input class="item__content__input" value="" :password="!visiblePassword" v-model="password" placeholder="请输入密码" placeholder-style="color: #999" />
						<text class="password--icon iconfontPT" :class="visiblePassword ? 'iconpassword-visible' : 'iconpassword-invisible'" @click="changePasswordIcon"></text>
					</view>
				</view>
			</view>
			<view class="login" @click="login">{{isLoading ? '登录中' : '登录'}}</view>
		</view>
	</view>
</template>

<script>
import { managerlogin } from '../apis/shop/api.js';
export default {
	data() {
		return {
			items: [
				{
					value: 1,
					name: '门店管理员',
					checked: 'true'
				},
				{
					value: 2,
					name: '门店员工'
				}
			],
			current: 1,
			username: '',
			password: '',
			visiblePassword: false,
			isLoading: false,
			currentTimeId: null
		};
	},
	onUnload() {
		clearInterval(this.currentTimeId);
	},
	methods: {
		changePasswordIcon() {
			this.visiblePassword = !this.visiblePassword;
		},
		radioChange: function(evt) {
			for (let i = 0; i < this.items.length; i++) {
				console.log(evt.target.value == this.items[i].value);
				if (this.items[i].value == evt.target.value) {
					console.log(1111);
					this.current = this.items[i].value;

					break;
				}
			}
		},
		login() {
			let that = this;
			let uid = uni.getStorageSync('userId');
			console.log(that.current);
			this.isLoading = true;
			uni.showLoading({
			    title: '登录中...',
				mask: true
			});
			
			managerlogin({
				account: that.username,
				password: that.password,
				is_store: that.current,
				uid: uid
			}).then(res => {
				this.currentTimeId = setTimeout(() => {
					this.isLoading = false;
					uni.hideLoading();
					
					if (res.code == 1) {
						uni.setStorageSync('token', res.data.token);
						uni.setStorageSync('store_id', res.data.store_id);
						uni.setStorageSync('user_info', res.data.user_info);
						uni.setStorageSync('manager_type', res.data.user_type);
						uni.navigateTo({
							url: 'shopmanager/shopmanager'
						});
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				}, 1000);
			});
		}
	}
};
</script>

<style lang="less">
.loginBox {
	padding: 140rpx 100rpx 100rpx;
	background-color: #f8f8f8;
	height: calc(100vh - 240rpx);

	background-image: url('http://cdn1.cheyizhuan.com/shop_bg.png-t.m90xx');
	background-repeat: repeat;
	background-position: center;
	background-size: cover;

	&__content {
		.item {
			border-bottom: 1rpx solid #efefef;
			line-height: 88rpx;

			&:first-child {
				border-bottom: 0;
				padding-bottom: 30rpx;
			}

			&__content {
				.radio-box-wrap {
					display: flex;
				}

				&__input {
					height: 88rpx;
					line-height: 88rpx;
				}

				&--password {
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}

			&-box {
				background-color: #fff;
				border-radius: 10rpx;
				box-shadow: 0rpx 6rpx 8rpx 2rpx rgba(153, 153, 153, 0.1);
				padding: 50rpx 40rpx 60rpx;
				border: 1rpx solid rgba(153, 153, 153, 0.1);
			}

			.uni-list-cell {
				margin-right: 30rpx;
			}

			.password--icon {
				padding: 0 10rpx;
				font-size: 34rpx;
				position: relative;
				top: 2rpx;
			}
		}

		.login {
			background-color: #e41805;
			color: #fff;
			font-size: 30rpx;
			line-height: 84rpx;
			margin-top: 80rpx;
			text-align: center;
			border-radius: 5px;
		}
	}
}
</style>
